<template>
  <div id="app">
    <h2>-------------modules-------------</h2>
    <h3>moduleA.name = {{this.$store.state.aa.name}}</h3>
    <h3>moduleA.name = {{this.$store.state.aa.counter}}</h3>
    <button @click="updateModule1Name">同步-修改moduleA的name</button>
    <h3>moduleA.fullName = {{this.$store.getters.fullName}}</h3>
    <h3>moduleA.fullName2 = {{this.$store.getters.fullName2}}</h3>
    <h3>moduleA.fullName3 = {{this.$store.getters.fullName3}}</h3>
    <button @click="AsyncUpdateModule2Name">异步-修改moduleA的name</button>
    <br>
    <h2>-------------个人信息-------------</h2>
    <h3>app.vue = {{this.$store.state.info}}</h3>
    <button @click="updateInfo">更新个人信息</button>
    <br>
    <h2>-------------App内容-------------</h2>
    <h3>app.vue = {{this.$store.state.counter}}</h3>
    <button @click="addition">+</button>
    <button @click="subtraction">-</button>
    <button @click="addCount(5)">+5</button>
    <button @click="addCount(10)">+10</button>
    <br>
    <h2>-------------App getters-------------</h2>
    <h3>counter^2={{this.$store.getters.powerCounter}}</h3>
    <hr>
    <h3>{{this.more20stu}}</h3>
    <h3>{{this.$store.getters.more20stuLength}}</h3>
    <hr>
    <h2>-------------App getters 传参数-------------</h2>
    <h3>{{this.$store.getters.moreAgeStu(18)}}</h3>
    <hr>
    <hello-vuex />
  </div>
</template>

<script>

  import HelloVuex from "./components/HelloVuex"

  import { INCREMENT } from "./store/mutations-types";

  export default {
    name: 'App',
    components: {
      HelloVuex,
    },
    computed: {
      more20stu() {
        // return this.$store.state.students.filter(s=>{
        //   return s.age >= 20
        // })

        return this.$store.state.students.filter(s => s.age>=20 )
      }
    },
    methods: {
      addition() {
        // commit 处理 mutations里面的 方法
        // this.$store.commit('increment')
        this.$store.commit(INCREMENT)
      },
      subtraction() {
        this.$store.commit('decrement')
      },
      addCount(count) {
        this.$store.commit('incrementCount', count)


        // 注意： 这种传递方式 过去，mutations 的第二个参数是 Payload -- 看 store/index.js 文件
        //----- 1 -----
        // this.$store.commit({
        //   type: 'incrementCount',
        //   count
        // })
        //----- 2 ----- 上面的方法，等于这个方法
        // this.$store.commit('incrementCount', {count} )
      },
      updateInfo() {
        // 1、 mutation
        // this.$store.commit('updateInfo')

        // a. action 普通写法
        this.$store.dispatch('aUpdateInfo')

        // b. 如果是 多个参数就不优雅
        // this.$store.dispatch('bUpdateInfo', ()=>{
        //   console.log('异步更改state，成功了')
        // })

        // c.
        // this.$store.dispatch('cUpdateInfo', '我是参数')
        // .then(()=>{
        //   console.log('异步更改state，成功了')
        // })
      },


      updateModule1Name() {
        this.$store.commit('updateName')
      },
      AsyncUpdateModule2Name() {
        // this.$store.dispatch('aUpdateInfo')
        this.$store.dispatch('fffUpdateInfo')
      }
    }
  }
</script>

<style>

</style>
